<template>
	<view style="width: 100vw;display: flex;justify-content: center;">
		<view class="page-content">
			<view
				style="display: flex;justify-content: space-around;flex-direction: column;height: 30vh;align-items: center;margin-top: 15vh;">
				<view style="display: flex;justify-content: space-around;width: 25vw;align-items: center;">
					<view class="def-text" style="width: 8vw">新密码：</view>
					<input v-model="newPass" password class="uni-input"
						style="text-align: left;padding-left: 15px;width: 21.6vw;height: 4.1vh;background: #004289;border-radius: 8px;" />
				</view>
				<view style="display: flex;justify-content: space-around;width: 25vw;align-items: center;">
					<view class="def-text" style="width: 8vw">重复新密码：</view>
					<input v-model="newPass2" password class="uni-input"
						style="text-align: left;padding-left: 15px;width: 21.6vw;height: 4.1vh;background: #004289;border-radius: 8px;" />
				</view>
				<view style="height: 2vh;">
					<view class="wrong-text" v-show="showWrong">
						密码错误，请重新输入新密码
					</view>
				</view>

				<view style="display: flex;justify-content: space-around;width: 18vw;margin-top: 5vh;">
					<view class="sub-btn" @click="cancel">
						<span class="btn-text">取消</span>
					</view>
					<view class="sub-btn" @click="submit">
						<span class="btn-text">确定</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ChangePassword
	} from '@/api/user.js'
	import config from '@/config.js'
	export default {
		data() {
			return {
				newPass: '',
				newPass2: '',
				showWrong: false,
				userid: ''
			}
		},
		created() {
			this.userid = config.userid
		},
		methods: {
			submit() {
				if (this.newPass != this.newPass2) {
					this.showWrong = true
					return
				}
				ChangePassword({
					data: {
						userid: this.userid,
						password: this.newPass
					}
				}).then((res) => {
					uni.showToast({
						title: '修改成功，请重新登录',
						duration: 2000
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '../../pages/login/login'
						})
					}, 1000)

				})
			},
			cancel() {
				this.newPass = ''
				this.newPass2 = ''
				this.showWrong = false
				this.$emit('showInfo')
			}

		}
	}
</script>

<style scoped>
	.wrong-text {
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FF2B2B;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}

	.sub-btn {
		background: #030A28;
		background-image: linear-gradient(180deg, rgba(72, 156, 255, 0.13) 0%, rgba(43, 186, 255, 0.18) 49%, rgba(0, 138, 255, 0.50) 100%);
		box-shadow: inset 0 0 11px 0 #05DCF8;
		width: 7.9vw;
		height: 3.3vh;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>